// 引入 css 样式
import './index.css';
import {FC} from 'react';
// 引入 阿里矢量图标
import { createFromIconfontCN } from '@ant-design/icons';
// axios 方法
import {getShoppingType,getShoppingList,ShoppingList} from '../../../api/admin';
// 引入 react 方法
import {useEffect,useState} from 'react';
// 引入侧边导航栏
import { SideBar } from 'antd-mobile';
// 引入路由方法
import {useNavigate} from 'react-router-dom';
// 引入 store
import store from 'store2';

let IconFont = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/c/font_4148694_v0hr188vut.js'});
interface CateProps{};

const Cate:FC<CateProps>=()=>{

  // 定义空数组存储商品分类
  interface ShoppingTypeProps {
    id: number;
    coverImage: string;
    name:string,
  }
  const [shoppingType, setshoppingType] = useState<ShoppingTypeProps[]>([]);

  // 定义空数组存储商品列表
  interface ShoppingListProps{
    id:number,
    coverImage:string,
    name:string,
    price:number,
  }
  const [shoppingList, setshoppingList] = useState<ShoppingListProps[]>([]);

  // 定义商品分类名称
  const [activeKey, setActiveKey] = useState<any>('雕塑手办');

  const [id,setId]=useState(1);
   // get 请求参数
   const Shopping:ShoppingList={
    page:1,
    per:12,
    category:id,
  }

  const [arr,setArr]=useState<any[]>([]);
  useEffect(()=>{
    getShoppingType().then(res=>{
      setshoppingType(res.data.data);
      setArr(res.data.data.map((item:any)=>{return {[item.name]:item.id}}).reduce((a:any,b:any)=>{
        return{...a,...b}
      },{}));
    });
    
  },[]);
  console.log(arr);
  useEffect(()=>{
    setId(arr[activeKey])
    getShoppingList(Shopping).then(res=>{
      console.log(res);
      setshoppingList(res.data.data);
    })
  },[activeKey])
 
  console.log(activeKey);
  
  // 点击跳转详情的函数
  const navigate=useNavigate();
 
  const jump=(i:number,p:number,)=>{
    store.set('shoppingId',i);
    store.set('shoppingPrice',p);
    navigate('/list');
  }
  const fn=()=>{
    console.log(666);
  }
    return(
        <>
          <div className="Cate">
            {/* 头部组件 */}
            <div className="Search">
              <span><IconFont type='icon-31fanhui1'/></span>
              <input type="text" readOnly value={'请输入商品名称'}/>
              <span className='fangdajing'><IconFont type='icon-fangdajing2'/></span>
            </div>
            {/* 内容组件 */}
            <article>
              <div className="left">
                <SideBar activeKey={activeKey} onChange={setActiveKey} >
                  {shoppingType.map((item) => (
                    <SideBar.Item   key={item.name} title={item.name}/>
                   ))}
                </SideBar>
          
              </div>
              <div className="right">
                <h5>{activeKey}</h5>
                {
                  shoppingList.map(item=><li onClick={()=>jump(item.id,item.price)} key={item.id}><img src={item.coverImage} alt="" /><p>{item.name}</p></li>)
                }
              </div>
            </article>
          </div>
        
        </>
    )
}

export default Cate;